<template>
  <div>
    <el-row>
      <el-col :span="7" style="max-height: 200px" >
        <div style="padding: 10px;margin: 20px " >
          <span>菜单列表</span>
          <el-divider></el-divider>
          <div style="display: flex;align-items: center;">
            <el-input v-model="orgDto.name" placeholder="组织"></el-input>
            <div style="flex: 1; margin: 0 10px;"></div>
            <el-button type="primary" @click="page">搜索</el-button>
          </div >
          <div style="max-height:600px; overflow-y: auto; margin: 20px 0;">
            <el-tree
              class="filter-tree"
              :data="orglist"
              :props="defaultProps"
              default-expand-all
              show-checkbox
              :check-strictly="true"
              ref="tree"
              @node-click="handleNodeClick">
            </el-tree>
          </div>
        </div>
      </el-col>

      <el-col :span="17">

        <div style="background-color: white; border-radius: 10px; height: 100px;margin-left: 10px;text-align: center;padding-top: 30px">
          <!-- 多条件分页查询所需条件的form -->
          <el-form :inline="true"  :model="scheduleJobLogDto" class="demo-form-inline">
            <el-form-item label="错误信息">
              <el-input ref="inputRef" v-model="scheduleJobLogDto.error" placeholder="请输入错误信息"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="query">查询</el-button>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="resetValues">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
        <!-- end -->

        <div style="background-color: white;margin-top: 10px; margin-bottom: 20px;margin-left: 10px;border-radius: 10px;">

          <div style="height: 20px"></div>

          <!-- table 用于展示项目建议信息 -->
          <el-table
            v-if="logShow"
            v-loading="loglistLoading"
            :data="loglist"
            style="width: 96%;margin-left: 32px"
            :max-height="800"
            :row-style="{ height: '55px' }"
          >
            <el-table-column fixed label="日志编号" header-align="center" align="center">
              <template slot-scope="scope">
                {{ scope.row.id }}
              </template>
            </el-table-column>
            <el-table-column label="任务编号" header-align="center" align="center">
              <template slot-scope="scope">
                {{ scope.row.job_id }}
              </template>
            </el-table-column>
            <el-table-column label="名称" header-align="center" align="center">
              <template slot-scope="scope">
                {{ scope.row.bean_name }}
              </template>
            </el-table-column>
            <el-table-column prop="name" label="参数" header-align="center" align="center">
              <template slot-scope="scope">
                {{ scope.row.params }}
              </template>
            </el-table-column>
            <el-table-column prop="name" label="失败信息" header-align="center" align="center">
              <template slot-scope="scope">
                {{ scope.row.error }}
              </template>
            </el-table-column>
            <el-table-column prop="age" label="耗时(毫秒)" header-align="center" align="center">
              <template slot-scope="scope">
                {{ scope.row.times }}
              </template>
            </el-table-column>
            <el-table-column prop="price" label="创建时间" header-align="center" align="center">
              <template slot-scope="scope">
                {{ scope.row.create_date }}
              </template>
            </el-table-column>
            <el-table-column prop="attention" label="状态" header-align="center" align="center">
              <template slot-scope="scope">
                {{ scope.row.status === 1 ? "正常":"错误"}}
              </template>
            </el-table-column>
          </el-table>
          <!-- end --->

          <div style="height: 50px;margin-bottom: 10px">

            <!-- 分页组件 -->
            <el-pagination
              background
              @current-change="change"
              @size-change="pageSizeChange"
              :current-page="logPageNumber"
              :page-sizes="[10]"
              :total="logTotal"
              layout="total, prev, pager, next, sizes,jumper"
              style="text-align: center; font-size: 8px; margin-top: 15px"
            >
            </el-pagination>
            <!-- end -->
          </div>

        </div> <!-- 间隔 -->

      </el-col>
    </el-row>
  </div>

</template>

<script>
import {selectOrg} from "@/api/scheduling/schedulingapi";
import { getScheduleJobLogById } from "@/api/scheduling/schedulingapi";

export default {
  data(){
    return{
      orgDto:{
        name:'',
      },
      orglist:[],//组织列表
      defaultProps: {
        children: 'list',
        label: 'name'
      },
      ids:'',//点击的id
      scheduleJobLogDto:{
        error:null,
        agencyId:null
      },
      logTotal: 0,
      logPageNumber: 1,
      logPageSize: 10,
      logShow:false,
      loglist:[],
      loglistLoading:true
    }

  },

  //创建生命周期
  created() {
    this.page()
  },


  methods:{
    page(){
      selectOrg().then(as=>{
        this.orglist=as
      })
    },

    init(id){
      this.loglistLoading = true

      const logDto = {
        pageNum: this.logPageNumber,
        pageSize: this.logPageSize,
        error: this.scheduleJobLogDto.error,
        agencyId: id
      }
        console.log(logDto)
      getScheduleJobLogById(logDto).then(response=>{
        this.loglist = response.data.list
        this.loglistLoading = false
        this.logTotal = response.data.total
        this.logShow = true
      })
    },

    //点击组织
    //点击菜单
    handleNodeClick(data){
      this.logShow = true
      this.ids=data.id
      this.init(data.id)
    },
    //分页
    change(val){
      this.truckPageNumber = val;
      this.init(this.ids);
    },
    //分页查询
    pageSizeChange(newPageSize) {
      this.truckPageSize = newPageSize;

      this.init(this.ids)
    },
    query(){
      this.init(this.ids)
    },
    resetValues(){
      this.$refs.inputRef.clear()
    }
  }
}
</script>


<style scoped lang="scss">

</style>
